package com.study.compose.beta.view

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.study.compose.beta.theme.Orange

/**
 * 作者：zhangjunfei 2021/6/1 4:42 下午
 * 主页：https://gitee.com/ZhangQQ_123/projects
 * 描述：画布示例
 */

//private val points =
//    listOf(1, 5, 8, 2, 4, 3, 9, 11, 19, 2, 11, 8, 13, 15, 12, 10, 11, 18, 19, 9, 10)

@Preview
@Composable
fun CanvasSample() {
    Box(
        Modifier
            .fillMaxSize()
            .padding(20.dp)
    ) {
        val points by remember {
            mutableStateOf(
                listOf(
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random(),
                    (5..15).random()
                )
            )
        }
        Canvas(modifier = Modifier.fillMaxSize()) {
            (0..20).forEach {
                //把dp转换为px
                //it.dp.coerceAtLeast(0.dp).roundToPx()
                drawLine(
                    start = Offset(x = 0f, y = it.toFloat() * (size.width / 20)),
                    end = Offset(x = size.width, y = it.toFloat() * (size.width / 20)),
                    color = Color.Red,
                    strokeWidth = 2.dp.value,
                    alpha = 0.2f,
                )

                drawLine(
                    start = Offset(x = it.toFloat() * (size.width / 20), y = 0f),
                    end = Offset(x = it.toFloat() * (size.width / 20), y = size.width),
                    color = Color.Red,
                    strokeWidth = 2.dp.value,
                    alpha = 0.2f,
                )

                if (it < 20) {
                    drawLine(
                        start = Offset(
                            x = it.toFloat() * (size.width / 20),
                            y = size.width - (points[it].toFloat() / 20f) * size.width
                        ),
                        end = Offset(
                            x = (it + 1).toFloat() * (size.width / 20),
                            y = size.width - (points[it + 1].toFloat() / 20f) * size.width
                        ),
                        color = Color.Red,
                        strokeWidth = 1.dp.toPx(),
                    )
                }
                drawCircle(
                    color = Orange,
                    radius = 10f,
                    center = Offset(
                        x = it.toFloat() * (size.width / 20),
                        y = size.width - (points[it].toFloat() / 20f) * size.width
                    )
                )
            }
        }
    }
}